<template>
  <div class="wai">
    <h1 class="biaoti">学生管理系统</h1>
    <div class="login-box" @keyup.enter="loginSubmit('loginForm')">
      <!-- 通过:rules="loginFormRules"来绑定输入内容的校验规则 -->
      <el-form
        :rules="loginFormRules"
        ref="loginForm"
        :model="loginForm"
        label-position="right"
        label-width="auto"
        show-message
      >
        <p class="login-title">欢迎登录</p>
        <div style="margin-top: 20px"></div>
        <el-form-item label="用户名" prop="loginName" class="item">
          <el-col :span="22">
            <el-input type="text" v-model="loginForm.loginName"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="密码" prop="loginPassword" class="item1">
          <el-col :span="22">
            <el-input
              type="password"
              v-model="loginForm.loginPassword"
            ></el-input>
          </el-col>
        </el-form-item>
        <div class="anniu">
          <el-button type="primary" @click="tiaostudent"
            >注册学生用户</el-button
          >
          <el-button type="primary" @click="loginSubmit('loginForm')"
            >登录</el-button
          >
          <el-button type="primary" @click="tiaoteacher"
            >注册教师用户</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
// import { defineComponent, reactive, toRefs } from 'vue'
const axios = require("axios");
export default {
  name: "Home",
  data() {
    return {
      t_bianhao: "",
      s_xuehao: "",
      loginForm: {
        loginName: "",
        loginPassword: "",
      },
      loginFormRules: {
        loginName: [
          { required: true, message: "账号不可为空", trigger: "blur" },
        ],
        loginPassword: [
          { required: true, message: "密码不可为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    tiaostudent() {
      this.$router.push({ name: "Studentzhuce" });
    },
    tiaoteacher() {
      this.$router.push({ name: "Teacherzhuce" });
    },
    loginSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let _this = this;
          axios
            .post("https://localhost:44391/api/denglu/chaxun", {
              yonghu: this.loginForm.loginName,
              mima: this.loginForm.loginPassword,
            })
            .then(function (response) {
              console.log(response);
              _this.t_bianhao = response.data.t_bianhao;
              _this.s_xuehao = response.data.s_xuehao;
              if (
                response.data.id >= 0 &&
                response.data.id != undefined &&
                response.data.guanlizhe === "1" &&
                (response.data.s_xuehao === "" ||
                  response.data.s_xuehao === null) &&
                (response.data.t_bianhao != null ||
                  response.data.t_bianhao != "")
              ) {
                _this.$store.commit("bianhao", _this.t_bianhao);
                // _this.$store.commit("yonghu",_this.yonghu);
                _this.$router.push({ path: "/about/rili" });
              } else if (
                response.data.id >= 0 &&
                response.data.id != undefined &&
                response.data.guanlizhe != "1" &&
                (response.data.s_xuehao != null ||
                  response.data.s_xuehao != "") &&
                (response.data.t_bianhao === null ||
                  response.data.t_bianhao === "")
              ) {
                _this.$store.commit("xuehao", _this.s_xuehao);
                _this.$router.push({ path: "/student/srili" });
              } else if (
                response.data.id >= 0 &&
                response.data.id != undefined &&
                response.data.guanlizhe != "1" &&
                (response.data.s_xuehao === null ||
                  response.data.s_xuehao === "") &&
                (response.data.t_bianhao != null ||
                  response.data.t_bianhao != "")
              ) {
                _this.$store.commit("bianhao", _this.t_bianhao);
                _this.$router.push({ path: "/teacher/trili" });
              } else {
                alert("账号或密码错误！请核对信息！");
              }
            });
        } else {
          return false;
        }
      });
    },
  },
  //vue进入页面刷新并且只刷新一次
  mounted: function () {
    if (location.href.indexOf("#reloaded") == -1) {
      location.href = location.href + "#reloaded";
      location.reload();
    }
  },
};
</script>
<style>
.biaoti {
  font-size: 56px;
  text-align: center;
  margin-top: 125px;
}
.login-box {
  border: 1px solid #dcdfe6;
  width: 350px;
  margin: auto;
  padding: 35px 35px 15px 35px;
  /* margin-top: 125px; */
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  /* box-shadow: 0 0 25px palegreen; */
}
.login-title {
  text-align: center !important;
  margin: 0 auto 0px auto;
  /* color: #66CD00; */
  font-size: 30px;
  font-weight: bold;
}
.anniu {
  width: 350px;
  height: 40px;
}
.wai {
  background: url("../assets/beijing.jpg") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}
.item .el-form-item__label {
  color: white;
}
.item1 .el-form-item__label {
  color: white;
  letter-spacing: 5px;
}
</style>